<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>房屋租赁平台---用户中心</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="/static/img/logo500x500.png" rel="shortcut icon" sizes="500x500">
    <link rel="stylesheet" href="/static/my/css/common.css">
    <link rel="stylesheet" href="/static/my/css/main.css">

</head>

<body>

    <div th:replace="common/head.html::banner(${user})"></div>
    <div class="user-main">
        <div class="main-left fl">
            <div style="text-align:center">
                <img id="" style="width:100px;
        height:100px;
        border-radius:8px;" th:src="${userInf.getProfill()}">
            </div>
            <div class="">

            </div>
            <div class="user-name">欢迎你</div>
            <ul>
                <li class="hover"><a href="/user/mine">我的资料</a></li>
                <li><a href="/user/myhouse">我发布的</a></li>
                <li><a href="/user/collect">我收藏的</a></li>
                <li><a href="/house/newhouse" target="_blank">发布房源</a></li>
                <li><a href="/user/liuyan">我的留言板</a></li>
                <li><a href="/user/news">合租需求</a></li>

            </ul>
        </div>
        <div class="main-right fr">
            <div id="allList">
                <div class="title">请修改您的资料</div>
                <div style="text-align:center;">
                    <div class="" style="margin:0 auto;padding-top: 5%">
                        <div id="img" style="display: inline;">
                            <div id="buttonT" class=""  onclick="driverUploadT();">
                                <img style="width:146px;
        height:146px;
        border-radius:8px;
        " id="ImgUrl" th:src="${userInf.profill}">



                            </div>
                        </div>
                    </div>
                    <form id="formTag" enctype="multipart/form-data" style="display: none">
                        <input type="file" id="inputT"  style="display: none" accept="image/*" onchange="imgPreview(this)">
                    </form>
                    <form action="mine" method="post">
                        <div class="input-group" style="margin:0 auto;padding-top: 5%">
                            <input type="text" name="name" class="form-control" id="name" required th:value="${userInf.name}"
                                   style="width:299px; height:44px; background:rgba(255,255,255,1); box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1); border-radius:8px;">
                        </div>
                        <div class="input-group" style="margin:0 auto;padding-top: 5%">
                            <input type="text" name="email" class="form-control" id="email" required th:value="${user.getEmail()}"
                                   style="width:299px; height:44px; background:rgba(255,255,255,1); box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1); border-radius:8px;">
                        </div>
                        <div class="input-group" style="margin:0 auto;padding-top: 5%">
                            <input type="text" name="telphone" class="form-control" id="telphone" required th:value="${user.getTelphone()}"
                                   style="width:299px; height:44px; background:rgba(255,255,255,1); box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1); border-radius:8px;">
                        </div>
                        <div class="input-group" style="margin:0 auto;padding-top: 5%">
                            <input type="password" name="password" class="form-control" id="password" required placeholder="请输入新的密码"
                                   style="width:299px; height:44px; background:rgba(255,255,255,1); box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1); border-radius:8px;">
                        </div>
                        <div class="input-group" style="margin:0 auto;padding-top: 5%">
                            <input class="form-control" type="radio" name="sex" value="男" id="sex1" th:checked="${userInf.getSex()}=='男'">
                            <label for="sex1">男</label>
                            <input class="form-control" type="radio" name="sex" value="女" id="sex2" th:checked="${userInf.getSex()}=='女'">
                            <label for="sex1">女</label>
                        </div>
                        <div class="input-group" style="margin:0 auto;padding-top: 5%">
                            <div style="display: inline">
                                <input id="register" type="submit" class="btn btn-default" style="width:300px;
height:48px;
background:rgba(56,8,8,1);
border-radius:8px;" >
            <span style="width:31px;
height:21px;
font-size:15px;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(255,255,255,1);
line-height:21px;
text-shadow:0px 2px 4px rgba(134,253,133,0.3);">保存</span>
                                </input>

                            </div>
                    </form>

                    </div>
                </div>
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <script>
        function driverUploadT() {
            $('#inputT').click(); // 模拟文件上传按钮点击操作
        }

        function imgPreview(fileDom) {
            upload();
            var file=$('#inputT')[0].files[0];
            var fileReader=new FileReader();
            var url = window.URL || window.webkitURL || window.mozURL;
            var imgUrl=url.createObjectURL(file);
            fileReader.readAsDataURL(file);
            fileReader.onload=function (ev) {
                var urldata=this.result;
                $("#ImgUrl").attr("src", imgUrl);

            }
            reader.readAsDataURL(file);

        }


        function upload() {
            var formData = new FormData();
            formData.append("files", $("#inputT")[0].files[0]);
            var self = this;
            $.ajax({
                url: "/user/uploadimg",
                type: "post",
                cache: false,
                data: formData,
                processData: false,// 不处理数据
                contentType: false, // 不设置内容类型
                withCredentials: true,
                success: function (data) {
                    $("#ImgUrl").attr("src", data.path);
                    $("#ImgUrl").attr("style", "width:100px;\n" +
                        "        height:100px;\n" +
                        "        border-radius:8px;");
                }
            })
        }
    </script>


</body>

</html>